<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="12" class="avatar">
        <el-avatar :size="60" icon="el-icon-user"> </el-avatar
      ></el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="12" class="avatar"> {{ this.curInfo.name }} </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="12" class="avatar rolename"> 学生 </el-col>
    </el-row>
    <el-menu default-active="/Student/Courses" router>
      <!-- <el-menu-item index="/Student/Main">
        <i class="el-icon-reading"></i> 首页
      </el-menu-item> -->
      <el-menu-item index="/Student/Courses">
        <i class="el-icon-collection"></i> 我的课程
      </el-menu-item>
      <el-menu-item index="/Student/Homework">
        <i class="el-icon-notebook-2"></i> 我的作业
      </el-menu-item>
      <el-menu-item index="/Student/Announce">
        <i class="el-icon-chat-dot-round"></i>课程通知
      </el-menu-item>
      <el-menu-item index="/Student/Setting">
        <i class="el-icon-setting"></i>个人账户
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import info from "../../store/index";

export default {
  computed: {
    curInfo() {
      return info.getters.userInfo;
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.avatar {
  font-size: 14px;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}
.rolename {
  color: gray;
}
</style>
